import { removeTailFixed } from '@/utils';

const colorList = ['#4975E9', '#6D91ED', '#B6C8F6', '#B6C8F6', '#DBE3FB'];
export const chinaMap = function (
  mapList: {
    name: string;
    value: number;
  }[]
) {
  return {
    visualMap: {
      min: 0, // 最小值
      max: 0.1, // 最大值
      realtime: false,
      calculable: false,
      hoverLink: false,
      show: false,
      inRange: {
        color: colorList.reverse()
      }
    },
    tooltip: {
      show: true,
      backgroundColor: 'rgba(0, 0, 0, 0.55)',
      alwaysShowContent: false,
      borderWidth: 0,
      trigger: 'item',
      formatter: function (params: any) {
        const rate = params.value
          ? removeTailFixed(((params.value * 10000) / 100).toFixed(1), 1) + '%'
          : '无数据';
        return `<div style="width: auto;overflow: hidden;font-size: 13px;line-height: 20px;color: white;text-overflow: ellipsis;white-space: nowrap;">
            ${params.name}
            <span style="margin-left: 4px">${rate}</span>
        </div>`;
      }
    },
    geo: [
      {
        // 影藏海南诸岛
        regions: [
          {
            name: '南海诸岛',
            itemStyle: {
              // 隐藏地图
              normal: {
                opacity: 0 // 为 0 时不绘制该图形
              }
            },
            label: {
              show: false // 隐藏文字
            }
          }
        ],
        // 指定图标为地图
        type: 'map',
        // 设置数据
        map: 'china',
        zoom: 1.2, // 改变这个值的大小就可以了
        // 是否开启缩放
        roam: false,
        color: 'red',
        // 设置缩放的大小
        scaleLimit: {
          min: 0,
          max: 35
        },
        emphasis: {
          disabled: false,
          color: 'black'
        },
        itemStyle: {
          normal: {
            // borderWidth: 1, //边际线大小
            // borderColor: "#00ffff", //边界线颜色
            borderColor: '#fff',
            areaColor: '#DBE3FB' // 默认区域颜色
          }
          // emphasis: {
          //   show: true,
          //   areaColor: "#3066ba", //鼠标滑过区域颜色
          //   label: {
          //     show: true,
          //     textStyle: {
          //       color: "#fff",
          //     },
          //   },
          // },
        },
        label: {
          show: false,
          emphasis: {
            show: false,
            color: 'black' // textStyle hierarchy in label has been removed since 4.0. All textStyle properties are configured in label directly now.
            // textStyle: {
            //   color: "black",
            // },
          }
        }
      }
    ],
    series: [
      {
        type: 'map',
        // 跟geo关联
        geoIndex: 0,

        mapType: 'china',
        // 设置人口的数据  用于显示在地图上
        data: mapList
      }
    ]
  };
};
